function selectEmployee(employeeId)
{
	$("#employeeUserName")[0].value=$("#employeeid"+employeeId+" :nth-child(1)")[0].innerHTML.trim();
	$("#employeePassword")[0].value=$("#employeeid"+employeeId+" :nth-child(3)")[0].innerHTML.trim();
	$("#employeeId")[0].value=employeeId;
}

function updateUser()
{
	var employeeId = $("#employeeId")[0].value;
	if (employeeId == null || employeeId == undefined || employeeId == '')
	{
		alert("You didn't choose a user to update");
		return false;
	}
	var employeeUserName = $("#employeeUserName")[0].value;
	var employeePassword = $("#employeePassword")[0].value;
	$.post('updateEmployee.do',{username: employeeUserName, password: employeePassword, id: employeeId}
	, function (data) {
		updateEmployeeLink(data, employeeId,employeeUserName, employeePassword );
	});
}

function updateEmployeeLink(data, employeeId, employeeUserName, employeePassword )
{
	$("#employeeid"+employeeId+" :nth-child(1)")[0].innerHTML=employeeUserName;
	$("#employeeid"+employeeId+" :nth-child(3)")[0].innerHTML=employeePassword;
}

function addUser()
{
	var employeeUserName = $("#employeeUserName")[0].value;
	var employeePassword = $("#employeePassword")[0].value;
	$.post('addEmployee.do', {username: employeeUserName, password: employeePassword}, function (data){
		
	})

}

function deleteUser(employeeId)
{
	$.post('deleteEmployee.do', {id: employeeId}, function (data){
		$("#employeeid"+employeeId).remove();
	})
}

function styleOnChange()
{
	var style = $("#styleOption")[0];
	$.getJSON('loadStyleConfig.do',{attribute: style.options[style.selectedIndex].text}, function (data){
		loadStyleContent(data);
			});
}

function loadStyleContent(data)
{
	var content="<table >";
	for(var value in data)
	{
		content+="<tr><td id='"+data[value]+"'"+" onclick='loadGivenCategoryContent("+data[value]+")' >"+data[value]+"</td></tr>";
	}
	content+="</table>";
	
	$("#styleContent").html(content);
}

function loadGivenCategoryContent(value)
{
	$.getJSON('loadStyleConfig.do',{attribute: value.textContent}, function (data){
		loadGivenCotent(data, value.textContent);
			});
}

function addGivenCategoryContent(value)
{
	$.getJSON('addStyleConfig.do',{attribute: value.textContent}, function (data){
		loadGivenCotent(data, value.textContent);
			});
}

function loadGivenCotent(data, sourceCategory)
{
	var content="<table id='"+"givenContent"+"'><tr>";
	for(var value in data)
	{
		content+="<td "+"onclick='updateStyleDetail("+data[value]+","+sourceCategory+")' >"+data[value]+"</td>";
	}
	content+="</tr></table>";
	
	$("#styleDetail").html(content);
}

function addNewStyleContent()
{
	
	var category = $("#styleCategory")[0].value.trim();
	if (category == null || category == undefined || category == '')
	{
		alert("You didn't choose a category to update");
		return false;
	}
	$( "#style-dialog-form" ).dialog( "open" );
	$("#newStyelCategoryContent").html(category);

}


